<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>监控${hostName}主机</title>
<link rel="stylesheet" href="<%=basePath%>/static/monitorpage/css/monitorpage.css">
<link rel="stylesheet" href="<%=basePath%>/static/bootstrap/2.3.1/css_cerulean/bootstrap.min.css" type="text/css" />

 <!-- 引入js开始 -->
 <script type="text/javascript" src="<%=basePath%>/static/jquery/jquery-1.8.3.min.js"></script>
 <script type="text/javascript" src="<%=basePath%>/static/highcharts/highcharts.js"></script>
 <script type="text/javascript" src="<%=basePath%>/static/highcharts/exporting.js"></script>
 <script type="text/javascript" src="<%=basePath%>/static/highcharts/dark-blue.js"></script>
 <script type="text/javascript" src="<%=basePath%>/static/highcharts/web_socket/swfobject.js"></script>
 <script type="text/javascript" src="<%=basePath%>/static/highcharts/web_socket/web_socket.js"></script>
 <script type="text/javascript" src="<%=basePath%>/static/highcharts/socket_connect.js"></script>
 <!-- 引入js结束 -->
 <script type="text/javascript">
 
function initDataTrendChart() {
	
	Highcharts.setOptions({
		global: {
			useUTC: false
		}
	});
	//初始化图片  point_num 一张图多少个x坐标点  time_interval 多长时间添加一个点
	var point_num = 30;
	var time_interval = 5; 
	window.chart = new Highcharts.Chart({
	    	chart : {
				renderTo : 'container', //要显示线状图的div的id
				type : 'line', //图表类型为线性图
				margin : 75,
			},
			title : {
				text : '${hostName}-主机监控'
			},
			subtitle : {
				text : '主机类型-${type}'
			},
			credits: {  //版权信息
				enabled: true,
				href: '${ctx}/zabbix/api/history.view?type=${type}&hostName=${hostName}',
				text: '历史记录',
				position: {
	                align: 'right',
	                x: -20,
	                verticalAlign: 'bottom',
	                y: -25
	            },
	            style: {
	                cursor: 'pointer',
	                color: '#909090',
	                fontSize: '14px'
	            }
	        },
			xAxis : {
				type : 'datetime',
				dateTimeLabelFormats : {
					day : '%H:%M'
				}
			},
			yAxis : {
				title : {
					text : ''
				}
			},
			plotOptions : {
				line : {
					dataLabels : {
						enabled : true
					},
					enableMouseTracking : false
				}
			},
			series : [         
			<c:forEach items="${seriesMap}" var="item" varStatus="status">  
				<c:choose>
					<c:when test="${status.first==true}">
					{
					name : '${item}',  //Label 名称
					data : (function() {
						// generate an array of random data
						var data = [], time = (new Date()).getTime(), i;
						for (i = -point_num; i <= -1; i++) {
							data.push([ time + i * time_interval * 1000, 0 ]);
						}
						return data;
					})()
			   		},
			   	   </c:when>
               	   <c:otherwise>
               		{
					name : '${item}', //Label 名称
					visible : false,   //初始化不显示
					data : (function() {
						// generate an array of random data
						var data = [], time = (new Date()).getTime(), i;
						for (i = -point_num; i <= -1; i++) {
							data.push([ time + i * time_interval * 1000, 0 ]);
						}
						return data;
					})()
			   		},					               	   	
               	   </c:otherwise>
               	</c:choose>
			</c:forEach>
			]
	    });
	}
//右侧页面加载
 function loadRightPage(room_name, group) {
			initDataTrendChart();
 			if (window.WebSocket) {
 				if (window.socket_obj) {
 					window.socket_obj.closeWebSocket();
 				}
 				window.socket_obj = new webSocketConnectInit({
 					reqUrl : [ '${socketAddress}', [ room_name + ' ' + group ] ]
 				});
 				window.socket_obj.init();
 			}
 }
//刷新页面相关的数据
 function refreshPageData(res) {
 	res = eval('(' + res + ')');
 	refreshChartTrend(res);
 }
 
//刷新走势图数据
 function refreshChartTrend(res) {
	
	 var y;
	 var key = res.key;
	 var x = res.clock
	 
	 if(String(res.value).indexOf(".")>-1){ //小数保留两位
		 y = Math.round(res.value*100)/100;
	 }else{
		 y = parseInt(res.value);
	 }
	 console.log(key+"-"+res.value+"-"+y);
	 //目前只能用遍历的方式添加数据节点
	 <c:forEach items="${indexMap}" var="item" varStatus="status"> 
	 	if('${item.key}' === key){
	 		var series = window.chart.series[${item.value}-1];
	 		series.addPoint([ x, y ], true, true);
	 	}
	 </c:forEach>
 }
 </script>
</head>

<body onload="loadRightPage('${hostName}','zoom_group')">
	<div id="container" style="min-width:700px;height:400px"></div>
</body>
</html>